// 外部事件调度器
let Event = new Vue();

Vue.component('brother1', {
	template: `
		<div>
			<label for='whh'>王花花说: </label>
			<input id='whh' type='text' @keyup='key_up' v-model='huahua_said'/>
			<p>{{huahua_said}}</p>
		</div>
	`,
	methods: {
		key_up: function () {
			Event.$emit('huahua_said_fn', {msg: this.huahua_said});
		}
	},
	data: function () {
		return {
			huahua_said: '',
		}
	}
})

Vue.component('brother2', {
	template: `
		<div>
			<label>李拴蛋说王花花说了: </label>
			<p>{{shuandan_said}}</p>
		</div>
	`,
	data: function () {
		return {
			shuandan_said: '',
		}
	},
	mounted() {
		let that = this;
		Event.$on('huahua_said_fn', function (data) {
			that.shuandan_said = data.msg;
		})
	},
})

new Vue({
	el: '#app'
})